<template>
  <div class="home-box">
    <div class="ly-border-card header">
      <div class="welcome">Hi，{{ userStore.name }}</div>
      <div class="list-title" @click.stop="checkTodoList">
        <div class="title-left">
          <span class="color-line"></span>
          <span class="title">消息待办</span>
          <van-icon name="chat-o" :badge="todoInfo.total > 99 ? '99+' : todoInfo.total"/>
        </div>
        <div class="search">
          <van-search readonly style="padding:  0;" placeholder="搜索关键词"/>
        </div>
      </div>
      <TodoListComp :todo-list="todoInfo.list"></TodoListComp>
    </div>
    <div class="ly-border-card team-box">
      <div class="team-header">
        <div>
          <span class="color-line"></span>
          <span class="title">我的团队</span>
        </div>
        <div class="filter-box">
          <el-checkbox @change="onFilterChange" v-model="onlyJunior">仅看直接下级</el-checkbox>
          <el-select class="no-border-select" style="width: 80px;margin: 0 5px;font-size: 12px;"
                     @change="onFilterChange" v-model="employeeType">
            <el-option label="职员" value="isOffice"></el-option>
            <el-option label="员工" value="isStuff"></el-option>
          </el-select>
          <el-select class="no-border-select" style="width: 100px;" @change="onFilterChange" v-model="organizationType">
            <el-option label="组织维度" value="organization"></el-option>
            <el-option label="运营维度" value="operation"></el-option>
            <el-option label="区域维度" value="area"></el-option>
          </el-select>
        </div>
      </div>
      <el-row class="today-box" :gutter="10">
        <el-col v-for="item in teamInfoList" :key="item.type" class="today-item" :span="8"
                @click.stop="checkTeamDetails(item)">
          <p>{{ item.name }}</p>
          <div :style="{backgroundColor: item.bgColor}" class="today-item-num">{{ item.total }}</div>
        </el-col>
      </el-row>
    </div>

    <div class="ly-border-card warning-work">
      <div>
        <span class="color-dot"></span>
        <span class="title">日期筛选</span>
      </div>
      <el-radio-group class="flex-center-around" v-model="dayNumber" @change="onDayNumberChange">
        <el-radio label="近一周" :value="7"></el-radio>
        <el-radio label="近一个月" :value="30"></el-radio>
        <el-radio label="近三个月" :value="90"></el-radio>
      </el-radio-group>
      <DateRange :date-number="dayNumber" @onDateRangeChange="onDateRangeChange"></DateRange>
      <div class="warning-box">
        <div>
          <span class="color-dot"></span>
          <span class="title">预警</span>
        </div>
        <el-row class="warning-content" :gutter="10">
          <el-col :span="8" @click.stop="checkTeamDetails(item)" v-for="item in workInfoList" :key="item.type">
            <p class="van-ellipsis title">{{ item.name }}</p>
            <div class="num">
              <span class="warning-text">{{ item.total }}</span>人
            </div>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <p class="van-ellipsis title">连续上班超15小时</p>-->
          <!--            <div class="num">-->
          <!--              <span class="warning-text">5</span>人-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8">-->
          <!--            <p class="van-ellipsis title">连续上班两周以上</p>-->
          <!--            <div class="num">-->
          <!--              <span class="warning-text">5</span>人-->
          <!--            </div>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8">-->
          <!--            <p class="van-ellipsis title">迟到人数</p>-->
          <!--            <div class="num">-->
          <!--              <span class="warning-text">5</span>人-->
          <!--            </div>-->
          <!--          </el-col>-->
        </el-row>
      </div>
      <div class="overtime-box">
        <div class="overtime-header">
          <div>
            <span class="color-dot"></span>
            <span class="title">总加班</span>
          </div>
          <div class="filter-box">
            <el-select class="no-border-select" style="width: 100px;margin: 0 5px;font-size: 12px;"
                       @change="onFilterChange" v-model="isManage">
              <el-option label="M序列" :value="1"></el-option>
              <el-option label="非M序列" :value="2"></el-option>
            </el-select>
            <el-select class="no-border-select" style="width: 120px;margin: 0 5px;font-size: 12px;"
                       @change="onFilterChange" v-model="workPosition">
              <el-option label="总监层" :value="1"></el-option>
              <el-option label="高级经理层" :value="2"></el-option>
              <el-option label="经理层" :value="3"></el-option>
              <el-option label="执行层及以下" :value="4"></el-option>
            </el-select>
          </div>
        </div>
        <div class='overtime-tips'>
          <div>
            <span class="dot" style="background-color: #f4b183"></span>
            <span>工作日平均加班时长：</span>
            <span>{{ 1.1 }}</span>h
          </div>
          <div>
            <span class="dot" style="background-color: #9dc3e6"></span>
            <span>休息日平均加班时长：</span>
            <span>{{ 0.6 }}</span>h
          </div>
        </div>
        <StackedBar :chart-data="departChartData"></StackedBar>
        <div class="employee-chart">
          <el-select style="width: 200px;" v-model="employeeOvertime">
            <el-option label="加班最长TOP5" value="max"></el-option>
            <el-option label="加班最短TOP5" value="min"></el-option>
          </el-select>
          <StackedBar :chart-data="employeeChartData"></StackedBar>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useUserStore} from "@/stores/userInfo.js";
import DateRange from "@/components/DateRange.vue";
import StackedBar from "@/components/StackedBar.vue";
import TodoListComp from "@/components/TodoListComp.vue";
import {useRouter} from "vue-router";

const userStore = useUserStore()
const router = useRouter();
// 消息待办
const todoInfo = ref({
  total: 9,
  list: [
    {
      name: '待办消息11111',
      id: '1',
      date: '2025-05-21'
    },
    {
      name: '待办消息22222',
      id: '2',
      date: '2025-05-21'
    },
    {
      name: '待办消息33333',
      id: '3',
      date: '2025-05-21'
    }
  ]
})

function checkTodoList() {
  router.push({
    path: '/todoList'
  })
}


// 我的团队
const onlyJunior = ref(false)
const employeeType = ref('isOffice')
const organizationType = ref('organization')

function onFilterChange() {

}

function checkTeamDetails(item) {
  router.push({
    path: `/teamDetails/${item.type}`
  })
}

const teamInfoList = ref([
  {
    name: '团队人数',
    total: 13,
    type: 'required',
    bgColor: '#0bc3c3'
  },
  {
    name: '今日实出勤',
    total: 7,
    type: 'actual',
    bgColor: '#ffc204'
  },
  {
    name: '今日请假',
    total: 6,
    type: 'leave',
    bgColor: '#1091ff'
  },
])

const dayNumber = ref(7)

function onDayNumberChange(val) {
  dayNumber.value = val
}

function onDateRangeChange(dateArr, isConfirm) {
  console.log(dateArr, 'dateArr')
  if (isConfirm) {
    dayNumber.value = 0
  }
}

const workInfoList = ref([
  {
    name: '连续上班超15小时',
    total: 5,
    type: '15hour',
  },
  {
    name: '连续上班两周以上',
    total: 7,
    type: '2week',
  },
  {
    name: '迟到人数',
    total: 6,
    type: 'late',
  },
])
const isManage = ref(1)
const workPosition = ref(1)

//部门加班时长
const departChartData = ref({
  xAxisData: ['研发部', '市场部', '人事部', '财务部', '运营部'],
  workdayOvertime: [4.5, 3.2, 1.8, 2.1, 5.6],// 工作日加班时长
  weekendOvertime: [2.3, 1.5, 0.8, 0.9, 3.2] // 休息日加班时长
})

//员工加班时长
const employeeOvertime = ref('max')
const employeeChartData = ref({
  xAxisData: ['张三', '李四', '王五', '钱六', '七七'],
  workdayOvertime: [4.5, 3.2, 1.8, 2.1, 5.6],// 工作日加班时长
  weekendOvertime: [2.3, 1.5, 0.8, 0.9, 0] // 休息日加班时长
})
</script>

<style scoped lang="scss">
.title {
  font-weight: 600;
  margin-right: 4px;
}

.color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $theme-color;
  margin-right: 4px;
  vertical-align: middle;
}

.filter-box {
  margin-left: 10px;
  flex: 1;
  min-width: 1px;
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: flex-end;
}

.header {
  position: relative;
  z-index: 1;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../assets/timecard-back-logo.png") left/contain no-repeat;
    opacity: 0.05; /* 透明度10% */
    z-index: -1; /* 置于底层 */
  }

  .welcome {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .list-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.team-box {
  margin-top: 10px;

  .team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .today-box {
    margin-top: 10px;
  }

  .today-item {
    text-align: center;
    cursor: pointer;

    &-num {
      margin-top: 10px;
      display: inline-block;
      vertical-align: top;
      width: 80%;
      height: 40px;
      border-radius: 6px;
      line-height: 40px;
      color: #ffffff;
      font-weight: bold;
    }
  }

}

.warning-work {
  margin-top: 10px;
}

.warning-box {
  margin-top: 10px;

  .warning-content {
    margin-top: 10px;
    border: 2px dashed $theme-color;
    padding: 4px;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;

    .num {
      margin-top: 4px;
      color: $theme-color;

      .warning-text {
        font-size: 18px;
        font-weight: bold;
        margin-right: 4px;
      }
    }
  }
}

.overtime-box {
  margin-top: 10px;

  .overtime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .overtime-tips {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;

    .dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 4px;
      vertical-align: middle;
    }
  }

  .employee-chart {
    margin-top: 20px;
  }
}
</style>
